<template>
	<view>
		<view class="logo">
			<!-- <image class="bg" src="/static/my_bg.png"></image> -->
			<view class="img">
				<!-- <image src="/static/logo.png" mode="widthFix"></image> -->
				<image :src="myconfig.logo" mode="widthFix"></image>
				<!-- <view class="text-center uni-h3 text-bold">{{myconfig.name}}</view> -->
			</view>
		</view>
		<view class="form re">
			<view class="username" v-if="type==1">
				<view class="get-code" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">{{getCodeText}}</view>
				<input type="number" :placeholder="i18n.login.inputmobile" v-model="mobile"  />
			</view>
			<view class="username" v-if="type==2">
				<view class="get-code" :style="{'color':getCodeBtnColor}" @click.stop="getCode2()">{{getCodeText}}</view>
				<input type="text" :placeholder="i18n.login.inputemail" v-model="email"  />
			</view>
			<view class="code" >
				<input type="number" :placeholder="i18n.login.verification" v-model="code"  />
			</view> 
			<view class="password">
				<input :placeholder="i18n.login.password" v-model="password" password=true  />
			</view>
			<view class="password">
				<input :placeholder="i18n.login.repassword" v-model="repassword" password=true  />
			</view> 
			<view class="btn" @tap="doReset" :disabled="logining">{{i18n.login.Reset}}</view>
			<view class="res">
				<view @tap="toLogin">{{i18n.login.login}}</view>
			 
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				type:1, //1 mobile 2 email
				mobile: "",
				email:"",
				code: '',
				password: "",
				repassword: "", 
				logining: false,
				getCodeText: '获取验证码',
				getCodeBtnColor: "#999999",
				getCodeisWaiting: false
			}
		},
		computed: {
			...mapState({
				myconfig: state => state.user.myconfig
			}),
			i18n() {
				return this.$t('message');
			}
		},
		onLoad() {   
			this.getCodeText= this.i18n.login.getcode;
		},
		methods: {
			...mapActions(['login', 'getUserinfo']),
			Timer() {},
			getCode() {
				uni.hideKeyboard()
				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.mobile))) {
					uni.showToast({
						title: this.i18n.popup.errmobile,
						icon: "none"
					});
					return false;
				}
				// this.getCodeText = "发送中..."
				this.getCodeisWaiting = true;
				// this.getCodeBtnColor = "rgba(255,255,255,0.5)"

				this.$http.post('index.code.get', {
					mobile: this.mobile,
					event: 'reset'
				}).then(res => {
					console.log(res);
					uni.showToast({
						title: this.i18n.login.sendcode,
						icon: "none"
					});
					this.setTimer();
				}).catch(e => {
					this.setTimer();
				})
			},
			getCode2() {
				uni.hideKeyboard()
				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/.test(this.email))) {
					uni.showToast({
						title: this.i18n.popup.erremail,
						icon: "none"
					});
					return false;
				}
				// this.getCodeText = "发送中..."
				this.getCodeisWaiting = true;
				// this.getCodeBtnColor = "rgba(255,255,255,0.5)"
			
				this.$http.post('index.code.get2', {
					email: this.email,
					event: 'reset'
				}).then(res => {
					console.log(res);
					uni.showToast({
						title: this.i18n.login.sendcode,
						icon: "none"
					});
					this.setTimer();
				}).catch(e => {
					this.setTimer();
				})
			},
			setTimer() {
				let holdTime = 60;
				this.getCodeText =  this.i18n.login.Reacquire+ "(60)"
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#999999";
						this.getCodeText = this.i18n.login.getcode;
						clearInterval(this.Timer);
						return;
					}
					this.getCodeText =  this.i18n.login.Reacquire+"(" + holdTime + ")"
					holdTime--;

				}, 1000)
			},
			doReset() {
				uni.hideKeyboard()
				if(this.type==1){
					if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.mobile))) {
						uni.showToast({
							title: this.i18n.popup.errmobile,
							icon: "none"
						});
						return false;
					}
				}else{
					if (!(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/.test(this.email))) {
						uni.showToast({
							title: this.i18n.popup.erremail,
							icon: "none"
						});
						return false;
					}
				}
				
				 
				if(this.password ==''){
					uni.showToast({
						title:  this.i18n.login.password,
						icon: "none"
					});
					return false;
				}
				if(this.password !== this.repassword){
					uni.showToast({
						title: this.i18n.popup.repass,
						icon: "none"
					});
					return false;
				} 
				
				uni.showLoading({
					title: 'loading...'
				})
				this.logining = true;
				let sendData = {}
				const {
					mobile,
					email,
					password,
					code
				} = this
				sendData = {
					mobile,
					email,
					password,
					code,
					loginWay: 4
				}
				this.login(sendData).then(res => {
					this.logining = false
					uni.hideLoading();
					console.log(res)
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}).catch(e => {
					this.logining = false
				})

			},
			toLogin() {
				uni.hideKeyboard()
				uni.navigateTo({
					url: "/pages/public/login"
				}) 
			} 
		}
	}
</script>

<style lang="scss">
	@import "../../static/css/login.scss"; 
</style>
